<template>
  <view class="activity-bg">
    <banner-box type="activity_center" border-radius="24rpx" banner-style="width: 100%;height: 210rpx;padding: 0 24rpx; margin-top: 24rpx;"></banner-box>
    <view class="activityBox" style="padding: 0 24rpx">
      <template v-for="item in activityList" :key="item.id">
        <ActivityBox :data="item"></ActivityBox>
      </template>
    </view>
    <view class="activityHistory" @click="gotoOtherPage">
      <text class="text">历史活动</text>
      <uni-icons type="forward" size="14" color="#cccccc"></uni-icons>
    </view>
  </view>
</template>

<script setup>
import BannerBox from '@/components/banner/panel'
import ActivityBox from '@/components/activity/panel'
import { ref, getCurrentInstance } from 'vue'
import { onShow } from '@dcloudio/uni-app'
const { $https } = getCurrentInstance().appContext.config.globalProperties
onShow(() => {
  getActivityList()
})
const activityList = ref([])
const getActivityList = () => {
  $https({
    url: '/taskActivity/center/list',
    type: 'ac',
    method: 'get'
  }).then(res => {
    activityList.value = res.data || []
  })
}
const gotoOtherPage = () => {
  uni.navigateTo({
    url: '/user/activityHistory'
  })
}
// taskActivity/center/list
</script>

<style scoped lang="scss">
.activity-bg{
  // padding: 0 24rpx;
  background-color: #F9F9F9;
  padding-bottom: 24rpx;
}
.activityHistory{
  background-color: #ffffff;
  padding: 32rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 24rpx;
  border-radius: 8rpx;
  margin-top: 24rpx;
  .text{
    font-weight: bold;
    font-size: 30rpx;
  }
}
</style>
